<template>
  <d2-container>
    <div class="accountrecharge">
        <div class="container clearfix">
            <div class="left fl">
                <el-tabs @tab-click="handleClick" v-model="activeName" type="border-card">
                    <el-tab-pane label="银行卡转账" name="yhk">
                        <div class="fontblock">如果充值提交不成功 第一时间联系客服！
                        </div>
                        <el-form :inline="true">
                            请充值到下方银行卡内
                            <el-form-item>
                                <br/>
                                卡号：6217 0041 8000 2253 003  耿若海    建设银行
                                <br/>
                            </el-form-item>
                        </el-form>
                        <el-form :inline="true">
                            <el-form-item label="充值金额：">
                                <el-input type="text" size="mini" placeholder="" v-model="tbmoney"
                                          style="width: 80px"></el-input>
                            </el-form-item>
                            <el-form-item label="银行卡号：">
                                <el-input type="text" size="mini" placeholder="" v-model="tborder"
                                          style="width: 180px"></el-input>
                            </el-form-item>
                            <el-form-item label="充值姓名：">
                                <el-input type="text" size="mini" placeholder="" v-model="tbname"
                                          style="width: 80px"></el-input>
                            </el-form-item>
                            <el-form-item label="充值截图：" prop="imgs">
                                <el-upload ref="upload2" class="upload-demo" drag action="/api/va/cooperationrecharge/bankcardimg"
                                        :on-success="upSuccess" :headers="token"
                                        :on-remove="upRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList">
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
                                </el-upload>
                            </el-form-item>
                            <br/>
                            <p style="padding: 0 80px;">
                              充值请延迟一分钟提交，如果充值提交不成功 第一时间联系客服！</p>
                            <el-form-item>
                                <el-button :loading="btnloading" type="primary" size="mini" @click="pay" style="margin-left: 85px">提交</el-button>
                            </el-form-item>
                        </el-form>
                        <h3 style="border-top:1px solid #ccc;margin:0;padding:20px 0;">审核列表</h3>
                        <el-table :data="tableData" border style="width: 100%" header-align="center">
                            <el-table-column prop="id" label="序号" width="100" align="center"></el-table-column>
                            <el-table-column prop="bankcard_time" label="日期" align="center"></el-table-column>
                            <el-table-column prop="bankcard_money" label="充值金额" align="center"></el-table-column>
                            <el-table-column prop="bankcard_number" label="帐号" align="center"></el-table-column>
                            <el-table-column label="截图" align="center">
                              <template slot-scope="scope">
                                <a :href="scope.row.bankcard_img" target="_Blank">
                                  <img :src="scope.row.bankcard_img" style="max-width: 240px;max-height: 100px">
                                </a>
                              </template>
                            </el-table-column>
                            <el-table-column label="审核状态" align="center">
                              <template slot-scope="scope">
                                <span v-if="scope.row.bankcard_status == 1">待审核</span>
                                <span v-else>通过</span>
                              </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                              <template slot-scope="scope">
                                <el-button type="danger" @click="onDelete(scope.row)" size="mini">删除</el-button>
                              </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination @current-change="handleCurrentChange" background :current-page.sync="page" style="text-align:right;margin-top:10px;"
                          :page-size="page_size" layout="total, prev, pager, next" :total="total">
                        </el-pagination>
                    </el-tab-pane>
                    <el-tab-pane label="支付宝自动充值入口" name="zfb">
                        <div>
                            <div class="code">
                                <img :src="config_value" style="display: block; width: 250px; margin: 0 auto;">
                            </div>
                            <div style="text-align:center;margin-top: 15px">转账完成后提交订单号</div>
                            <p style="text-align:center;">提示:充值请延迟一分钟提交，如果充值提交不成功 第一时间联系客服！</p>
                            <el-form label-width="100px" ref="form" size="mini" style="padding-top: 15px;text-align:center;" :inline="true">
                                <el-form-item label="支付宝订单号">
                                    <el-input placeholder="请输入支付宝订单号" style="width: 205px;" v-model.trim="order"></el-input>
                                </el-form-item>
                                <el-form-item label="充值金额">
                                    <el-input placeholder="请输入充值金额" style="width: 205px;" v-model.trim="moneys">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="">
                                    <el-button type="primary" @click="supPay" :loading="submitloading">提交</el-button>
                                </el-form-item>
                            </el-form>
                            <div style="height: 1px; background: #ccc;"></div>
                            <h3>支付宝充值记录</h3>
                            <el-table :data="zfbtableData" style="width: 100%" border header-align="center">
                                <el-table-column prop="order_number" label="商户订单号" align="center"></el-table-column>
                                <el-table-column prop="information" label="账户信息" align="center"></el-table-column>
                                <el-table-column prop="after_money" label="充值前余额" align="center"></el-table-column>
                                <el-table-column prop="change" label="充值金额" align="center"></el-table-column>
                                <el-table-column prop="transaction" label="支付宝交易号" align="center"></el-table-column>
                                <el-table-column prop="booked_time" label="充值时间" align="center"></el-table-column>
                            </el-table>
                            <el-pagination @current-change="handleZfbChange" :current-page.sync="zfbpage" style="text-align:right;margin-top:10px;"
                              :page-size="20" layout="total, prev, pager, next" :total="zfbtotal">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div>
        </div>
    </div>
  </d2-container>
</template>

<script>
import { bankcardsubmit,bankcardlist,bankcarddel,paymentrecord,aliloglist,userinfo,get_ali_img } from '../../../api/api'
    import Clipboard from "clipboard";
    export default {
        data() {
            return {
                zfbtableData: [],
                moneys: "",
                tableData: [],
                tbmoney: "",
                page_size:10,
                tborder: "",
                tbname: "",
                order: "",
                activeName: "yhk",
                imgs:'',
                token:{
                  'Token':JSON.parse(localStorage.getItem('token'))
                },
                fileList:[],
                btnloading:false,
                page:1,
                total:0,
                submitloading:false,
                zfbpage:1,
                zfbtotal:0,
                config_value:""
            };
        },
        created(){
          this.getZfbList()
          this.getList()
          this.getUser()
          this.get_ali_imgS()
        },
        methods: {
          get_ali_imgS(){
            get_ali_img().then((res)=>{
               this.config_value= res.Data.config_value
            })
          },
          //获取支付宝列表
          getZfbList(){
            let params = {
              page:this.zfbpage
            }
            aliloglist(params).then(res=>{
              if(res.Status == 200){
                  this.zfbtotal = res.Count
                  let temp = res.Data
                  temp.forEach(item => {
                    item.booked_time = this.insertStr(item.booked_time,10,' ')
                    this.zfbtableData.push(item)
                  })
                }else{
                  this.$message.error(res.Message)
                }
            })
          },
          insertStr(soure, start, newStr){
            return soure.slice(0, start) + newStr + soure.slice(start);
          },
          //支付宝分页
          handleZfbChange(val){
            this.zfbtableData = []
            this.zfbpage = val
            this.getZfbList()
          },
          //获取银行卡列表
            getList() {
              let params = {
                page:this.page,
                page_size:this.page_size
              }
              this.tableData = []
              bankcardlist(params).then(res=>{
                console.log('银行卡列表',res)
                if(res.Status == 200){
                  this.total = res.Count
                  let temp = res.Data
                  let ipos
                  temp.forEach(item => {
                    ipos = item.bankcard_time.indexOf("+")
                    item.bankcard_time = item.bankcard_time.replace(/T/g," ").substring(0,ipos)
                    this.tableData.push(item)
                  })
                }else{
                  this.$message.error(res.Message)
                }
              })
            },
            //银行卡分页
            handleCurrentChange(val) {
              this.page = val
              this.getList()
            },
            //删除
            onDelete(row){
              let params = {
                id:row.id
              }
              bankcarddel(params).then(res=>{
                console.log('删除',res)
                if(res.Status == 200){
                  this.$message.success(res.Message)
                  this.getList()
                }else{
                  this.$message.error(res.Message)
                }
              })
            },
            //上传成功
            upSuccess(a) {
              this.imgs = a.UrlImg
              this.$message.success(a.Message)
            },
            //移除
            upRemove(file, fileList){
              this.imgs = ''
            },
            //限制上传个数
            handleExceed(files, fileList) {
              this.$message.warning(`当前限制选择 1 个文件！`);
            },
            pay() {
              let _this = this
              if(_this.tbname == ''){
                _this.$message.warning('充值姓名不能为空！')
              }else if(_this.tborder == ''){
                _this.$message.warning('充值金额不能为空！')
              }else if(_this.tbmoney == ''){
                _this.$message.warning('银行卡号不能为空！')
              }else if(_this.imgs == ''){
                _this.$message.warning('请上传充值截图！')
              }else{
                _this.btnloading = true
                let params = {
                  bankcard_img:_this.imgs,
                  bankcard_money:Number(_this.tbmoney),
                  bankcard_name:_this.tbname,
                  bankcard_number:_this.tborder,
                }
                bankcardsubmit(params).then(res=>{
                  _this.btnloading = false
                  if(res.Status == 200){
                    _this.imgs = ''
                    _this.tbmoney = ''
                    _this.tbname = ''
                    _this.tborder = ''
                    _this.fileList = []
                    _this.$message.success(res.Message)
                    this.getList()
                  }else{
                    _this.$message.error(res.Message)
                  }
                })
              }
            },
            //支付宝提交
            supPay() {
              let _this = this
              if(_this.order == ''){
                _this.$message.error('支付宝订单号不能为空！')
              }else if(_this.moneys == ''){
                _this.$message.error('充值金额不能为空！')
              }else{
                _this.submitloading = true
                let params = {
                  order_num:_this.order,
                  money:Number(_this.moneys)
                }
                paymentrecord(params).then(res=>{
                  _this.submitloading = false
                  if(res.Status == 200){
                    _this.$message.success(res.Message)
                    _this.order = ''
                    _this.moneys = ''
                    this.getUser()
                    this.getZfbList()
                  }else{
                    _this.$message.error(res.Message)
                  }
                })
              }
            },
            //获取用户信息
            getUser(){
              userinfo().then(res=>{
                console.log('个人信息',res)
                if(res.Status == 200){
                  window.localStorage.setItem('userinfoing',JSON.stringify(res.Data))
                  this.$store.commit('Money',JSON.stringify(res.Data.Money))
                  this.$emit('getMoney',res.Data.money)
                }else{
                  this.$message.error(res.Message)
                }
              })
            },
            handleClick(tab, event) {
              if(this.activeName == 'yhk'){
                this.getList()
              }
            },
        },
    };
</script>

<style lang="scss">
    .accountrecharge {
        width: 100%;
        overflow-y: scroll;
        margin: 0 auto;
        .left {
            // width: 80%;
            /*background: #444;*/
            /*border:1px solid red;*/
            padding-right: 20px;
        }
        .right {
            width: 20%;
            height: 440px;
            background-color: #f0f0f4;
            padding: 20px;
        }

        supPay
        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .clearfix:after {
            display: block;
            visibility: hidden;
            clear: both;
            height: 0;
            content: "";
        }

        .clearfix {
            zoom: 1;
        }

        .qqimg img {
            cursor: pointer;
        }

        .button {
            position: relative;
            left: 55px;
        }

        .fontblock {
            background: #fffbf0;
            padding: 20px;
            margin-bottom: 10px;
        }

        .bottom h3 {
            padding: 10px;
            background: #fffbf0;
            margin: 20px 0 0 0;
            color: #a78e44;
        }

        .bottom ol {
            background: #f0f0f4;
            margin: 0;
        }

        .bottom ol li {
            padding: 5px 0;
        }

        .el-input.is-disabled .el-input__inner {
            color: #888080;
        }
    }
</style>
